<template>
  <div v-loading="loading" class="record-table">
    <div class="w-full" v-if="fileList.length == 0">
      <div class="w-full flex flex-col items-center justify-center gap-4 py-8">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text size-8 text-zinc-400">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
          <path d="M10 9H8"></path>
          <path d="M16 13H8"></path>
          <path d="M16 17H8"></path>
        </svg>
        <p class="text-sm text-zinc-500">没有找到历史记录，快去创建一篇吧</p>
      </div>
    </div>
    <div v-else class="table-content-width">
      <el-table :data="fileList" :show-header="false" style="width: 100%">
        <el-table-column prop="status" label="状态" width="40">
          <template #default="scope">
            <el-icon class="custom-loading-icon" v-if="scope.row.status === 'PENDING' || scope.row.status === 'PROCESSING'">
              <Loading />
            </el-icon>
            <el-icon class="custom-icon" v-else-if="scope.row.status === 'SUCCESS'">
              <Notebook />
            </el-icon>
            <el-icon class="custom-icon" color="#f56c6c" v-else-if="scope.row.status === 'FAIL'">
              <Warning />
            </el-icon>
            <!-- <span style="margin-left: 20px">{{statusList[scope.row.status]}}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="oriFileName" label="文件名" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="scope">
            <span v-if="scope.row.type * 1 === 0">文献阅读</span>
            <span v-else-if="scope.row.type * 1 === 1">批量阅读</span>
            <span v-else-if="scope.row.type * 1 === 2">文献翻译</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间" width="160" />
        <el-table-column label="操作" width="90">
          <template #default="scope">
            <el-button link :icon="View" type="primary" size="small" class="operate-btn-txt" @click="handleClick(scope)" v-if="scope.row.status === 'SUCCESS'">
              查看
            </el-button>
            <!-- <el-button link :icon="Refresh" type="primary" size="small" class="operate-btn-txt" @click="handleClick(scope)" v-else-if="scope.row.status === 'FAIL'">
              重试
            </el-button> -->
            <span v-else> </span>
            <!-- <el-button link type="primary" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { View, Refresh } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { History } from '@/api/user'

const router = useRouter();
const props = defineProps(['homePage'])

const timer = ref(null);
const fileList = ref([{'oriFileName':""}]);
const statusList = {
  PENDING: '待处理',
  PROCESSING: '处理中',
  SUCCESS: '处理成功',
  FAIL: '处理失败',
}

const loading = ref(true);

onMounted(() => {
  getRecordList();
  timer.value = setInterval(() => {
    getRecordList();
  }, 5000);
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});

const getRecordList = async ()=>{
  let res = await History()
  if(res.code == 200){
    loading.value = false;
    if (props.homePage) {
      // 首页只展示5条
      if (res.data.length > 5) {
        fileList.value = res.data.slice(0, 5)
      } else {
        fileList.value = res.data
      }
    } else {
      fileList.value = res.data
    }
  } else {
    fileList.value = [];
    ElMessage.error(res.message);
  }
}

const handleClick = (scope) => {
  sessionStorage.setItem(scope.row.taskId, scope.row.oriFileName);
  nextTick(() => {
    if (scope.row.type * 1 === 0) {
      router.push({
        name: 'LiteratureDetail',
        query: { task: scope.row.taskId }
      })
    } else if (scope.row.type * 1 === 1) {
      router.push({
        name: 'BatchDetail',
        query: { task: scope.row.taskId }
      })
    } else if (scope.row.type * 1 === 2) {
      router.push({
        name: 'TranslationDetail',
        query: { task: scope.row.taskId }
      })
    }
  });
}
</script>

<style scoped>
.custom-loading-icon {
  animation: spin 2s linear infinite;
  font-size: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  color: var(--primary);
}

.custom-icon {
  font-size: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

::v-deep .el-table .el-table__cell {
  padding: 12px 0;
  border-bottom: none;
}
::v-deep .el-table__inner-wrapper:before {
  height: 0px;
}
::v-deep .el-table tr, ::v-deep .el-table .el-table__cell, ::v-deep .el-loading-mask, ::v-deep .el-table__inner-wrapper {
  background: var(--background);
  color: var(--txt-color);
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background: var(--menu-background);
}
.operate-btn-txt, .operate-btn-txt:hover {
  color: var(--primary);
  font-size: 14px;
}
.table-content-width {
  width: 100%;
  position: absolute;
}
.record-table {
  min-height: 150px;
  width: 100%;
  position: relative;
  background: var(--background);
}
</style>